<template>
	<div>
		<el-row :gutter="10">
			<el-col :span="24">
				<el-card shadow="never" class="card">
					<div id="charts_one" style="width:100%;min-height:80vh">
						<Search size='small' :searchVisible="searchVisible" :searchData.sync="searchData"  :searchForm="searchForm" @refresh_list="index"></Search>
						<div class="btn-group" style="margin-bottom:11px;">
                           <div>
                               <el-button type="info" :disabled="single" size="mini" icon="el-icon-view"  @click="detail(ids)" v-if="checkPermission('/app/UserAccount/detail.html')" >{{$t('action.detail')}}</el-button>  
                           </div>
                           <table-tool :searchVisible.sync="searchVisible"  :fieldList="fieldList" @refresh_list="index" :searchTool="true"></table-tool>
						</div>
					    <el-table :row-class-name="rowClass" @selection-change="selection"  @row-click="handleRowClick"  row-key="uid" @sort-change="sortChange" :header-cell-style="{ background: '#eef1f6', color: '#606266' }" v-loading="loading"  ref="multipleTable" border class="eltable" :data="list" :summary-method="getSummaries" show-summary style="width: 100%">		   
						    <el-table-column align="center" type="selection" width="42"></el-table-column>
							<el-table-column align="center" type='' v-if="fieldList[0].checked" property="uid" label="ID" show-overflow-tooltip width="70">
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[1].checked" property="user_real_name" :label="$t('field.UserAccount_user_real_name')" show-overflow-tooltip width="" sortable="custom">
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[2].checked" property="user_caller" :label="$t('field.UserAccount_user_caller')" show-overflow-tooltip width="">
							       <template slot-scope="scope">  
     								  {{getUser_callerValue(scope.row.user_caller)}}
      							   </template>
							 </el-table-column>
							<el-table-column align="center"  v-if="fieldList[3].checked" property="account" :label="$t('field.UserAccount_account')" show-overflow-tooltip width="" sortable="custom">
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[4].checked" property="rec_total" :label="$t('field.UserAccount_rec_total')" show-overflow-tooltip width="" sortable="custom">
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[5].checked" property="rec_fee" :label="$t('field.UserAccount_rec_fee')" show-overflow-tooltip width="" sortable="custom">
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[6].checked" property="wit_total" :label="$t('field.UserAccount_wit_total')" show-overflow-tooltip width="" sortable="custom">
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[7].checked" property="capital_total" :label="$t('field.UserAccount_capital_total')" show-overflow-tooltip width="" sortable="custom">
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[8].checked" property="trade_total" :label="$t('field.UserAccount_trade_total')" show-overflow-tooltip width="" sortable="custom">
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[9].checked" property="manage_total" :label="$t('field.UserAccount_manage_total')" show-overflow-tooltip width="" sortable="custom">
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[10].checked" property="deferred_total" :label="$t('field.UserAccount_deferred_total')" show-overflow-tooltip width="" sortable="custom">
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[11].checked" property="divide_total" :label="$t('field.UserAccount_divide_total')" show-overflow-tooltip width="" sortable="custom">
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[12].checked" property="change_total" :label="$t('field.UserAccount_change_total')" show-overflow-tooltip width="" sortable="custom">
							</el-table-column>
							<el-table-column align="center>"  v-if="fieldList[13].checked" property="stamp_total" :label="$t('field.UserAccount_stamp_total')" show-overflow-tooltip width="" sortable="custom">
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[14].checked" property="profit_total" :label="$t('field.UserAccount_profit_total')" show-overflow-tooltip width="" sortable="custom">
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[15].checked" property="fee_total" :label="$t('field.UserAccount_fee_total')" show-overflow-tooltip width="" sortable="custom">
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[16].checked" property="agent" :label="$t('field.UserAccount_agent')" show-overflow-tooltip width="" sortable="custom">
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[17].checked" property="voucher_management" :label="$t('field.UserAccount_voucher_management')" show-overflow-tooltip width="" sortable="custom">
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[18].checked" property="voucher_managetotal" :label="$t('field.UserAccount_voucher_managetotal')" show-overflow-tooltip width="" sortable="custom">
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[19].checked" property="voucher_cash" :label="$t('field.UserAccount_voucher_cash')" show-overflow-tooltip width="" sortable="custom">
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[20].checked" property="friend_coupon" :label="$t('field.UserAccount_friend_coupon')" show-overflow-tooltip width="" sortable="custom">
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[21].checked" property="my_coupon" :label="$t('field.UserAccount_my_coupon')" show-overflow-tooltip width="" sortable="custom">
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[22].checked" property="first_voucher_done" :label="$t('field.UserAccount_first_voucher_done')" show-overflow-tooltip width="">
							       <template slot-scope="scope"> 
							          <el-tag  v-if="scope.row.first_voucher_done == '1'" size="mini" effect="dark">是</el-tag>
							          <el-tag  v-if="scope.row.first_voucher_done == '0'" size="mini" effect="dark">否</el-tag>
							       </template>    
							 </el-table-column>
							<el-table-column align="center"  v-if="fieldList[23].checked" property="first_total" :label="$t('field.UserAccount_first_total')" show-overflow-tooltip width="" sortable="custom">
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[24].checked" property="first_trans_red_total" :label="$t('field.UserAccount_first_trans_red_total')" show-overflow-tooltip width="" sortable="custom">
							</el-table-column>
							 <el-table-column align="center"  v-if="fieldList[25].checked" property="first_date" :label="$t('field.UserAccount_first_date')" show-overflow-tooltip width="" sortable="custom">
								<template slot-scope="scope">
								           {{parseTime(scope.row.first_date)}}
								  
									
								</template>
							 </el-table-column>
							<el-table-column align="center"  v-if="fieldList[26].checked" property="first_gift" :label="$t('field.UserAccount_first_gift')" show-overflow-tooltip width="">
							       <template slot-scope="scope"> 
							          <el-tag  v-if="scope.row.first_gift == '0'" size="mini" effect="dark">未领取</el-tag>
							          <el-tag  v-if="scope.row.first_gift == '1'" size="mini" effect="dark">已领取</el-tag>
							       </template>    
							 </el-table-column>
							 <el-table-column align="center>"  v-if="fieldList[27].checked" property="first_trans_date" :label="$t('field.UserAccount_first_trans_date')" show-overflow-tooltip width="" sortable="custom">
								<template slot-scope="scope">
								           {{parseTime(scope.row.first_trans_date)}}
								  
									
								</template>
							 </el-table-column>
							<el-table-column align="center>"  v-if="fieldList[28].checked" property="first_voucher" :label="$t('field.UserAccount_first_voucher')" show-overflow-tooltip width="" sortable="custom">
							</el-table-column>
							 <el-table-column align="center>"  v-if="fieldList[29].checked" property="last_trans_date" :label="$t('field.UserAccount_last_trans_date')" show-overflow-tooltip width="" sortable="custom">
								<template slot-scope="scope">
								           {{parseTime(scope.row.last_trans_date)}}
								  
									
								</template>
							 </el-table-column>
							<el-table-column align="center>"  v-if="fieldList[30].checked" property="profit_multiple" :label="$t('field.UserAccount_profit_multiple')" show-overflow-tooltip width="" sortable="custom">
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[31].checked" property="user_name" :label="$t('field.UserAccount_user_name')" show-overflow-tooltip width="" sortable="custom">
							</el-table-column>
						</el-table>
						<Page :total="page_data.total" :page.sync="page_data.page" :limit.sync="page_data.limit" @pagination="index" />
					</div>
				</el-card>
			</el-col>
		</el-row>
		<!--查看详情-->
		<Detail :info="detailInfo" :show.sync="dialog.detailDialogStatus" size="small" @refresh_list="index"></Detail>
	</div>
</template>
<script>
	import {
	    index, 
	    updateExt, 
	} from '@/api/app/useraccount'
	import Search from '@/components/common/Search.vue'
	import Page from '@/components/common/Page.vue'
	import TableTool from '@/components/common/TableTool.vue'
	import { confirm,param2Obj } from '@/utils/common'
	import Detail from '@/views/app/useraccount/detail.vue' 
	export default {
		name:'userAccount',
		components: {
			Search,
			Page,
			TableTool,
	        Detail,  
		},
		data(){
			return {
				dialog: {
	                    detailDialogStatus : false,     
				},
				fieldList:[
					{lable:'ID',checked:true},
				    {lable:this.$t('field.UserAccount_user_real_name'),checked:true},
				    {lable:this.$t('field.UserAccount_user_caller'),checked:true},
				    {lable:this.$t('field.UserAccount_account'),checked:true},
				    {lable:this.$t('field.UserAccount_rec_total'),checked:true},
				    {lable:this.$t('field.UserAccount_rec_fee'),checked:true},
				    {lable:this.$t('field.UserAccount_wit_total'),checked:true},
				    {lable:this.$t('field.UserAccount_capital_total'),checked:true},
				    {lable:this.$t('field.UserAccount_trade_total'),checked:true},
				    {lable:this.$t('field.UserAccount_manage_total'),checked:true},
				    {lable:this.$t('field.UserAccount_deferred_total'),checked:true},
				    {lable:this.$t('field.UserAccount_divide_total'),checked:true},
				    {lable:this.$t('field.UserAccount_change_total'),checked:true},
				    {lable:this.$t('field.UserAccount_stamp_total'),checked:false},
				    {lable:this.$t('field.UserAccount_profit_total'),checked:true},
				    {lable:this.$t('field.UserAccount_fee_total'),checked:true},
				    {lable:this.$t('field.UserAccount_agent'),checked:true},
				    {lable:this.$t('field.UserAccount_voucher_management'),checked:true},
				    {lable:this.$t('field.UserAccount_voucher_managetotal'),checked:true},
				    {lable:this.$t('field.UserAccount_voucher_cash'),checked:true},
				    {lable:this.$t('field.UserAccount_friend_coupon'),checked:true},
				    {lable:this.$t('field.UserAccount_my_coupon'),checked:true},
				    {lable:this.$t('field.UserAccount_first_voucher_done'),checked:true},
				    {lable:this.$t('field.UserAccount_first_total'),checked:true},
				    {lable:this.$t('field.UserAccount_first_trans_red_total'),checked:true},
				    {lable:this.$t('field.UserAccount_first_date'),checked:true},
				    {lable:this.$t('field.UserAccount_first_gift'),checked:true},
				    {lable:this.$t('field.UserAccount_first_trans_date'),checked:false},
				    {lable:this.$t('field.UserAccount_first_voucher'),checked:false},
				    {lable:this.$t('field.UserAccount_last_trans_date'),checked:false},
				    {lable:this.$t('field.UserAccount_profit_multiple'),checked:false},
				    {lable:this.$t('field.UserAccount_user_name'),checked:true},
				],
				ids: [],
				selectRows:[],
				selectTotal:0,
				single:true,
				multiple:true,
				list: [],
				small_tables:{},
	            detailInfo:{},
				loading: false,
				page_data: {
					limit: 20,
					page: 1,
					total:20,
				},
	            sort:'',
	            order:'',
				searchVisible:true,
				searchForm:[],
				searchData:{},
			}
		},
		methods: {
			index(){
				let param = {limit:this.page_data.limit,page:this.page_data.page,sort:this.sort,order:this.order}
				Object.assign(param, this.searchData,param2Obj(this.$route.fullPath))
				this.loading = true
				index(param).then(res => {
					this.list = res.data.data
					this.small_tables=res.sql_field_data
					this.page_data.total = res.data.total
					this.loading = false
					if(this.page_data.page == 1){
						this.searchForm = [
						        {type:'Input',label:this.$t('field.UserAccount_user_real_name'),prop:'user_real_name',width:'150px'},   
						       {type:'Select',label:this.$t('field.UserAccount_user_caller'),prop:'user_caller',data:res.sql_field_data.user_callers,width:'150px'},
							   {type:'Select',label:this.$t('field.UserAccount_account_type'),prop:'account_type',data:[{"val":"live","label_color":"info","key":"普通用户"},{"label_color":"success","val":"simulate","key":"模拟用户"}],width:'150px'},
						        {type:'Input',label:this.$t('field.UserAccount_agent'),prop:'agent',width:'150px'},   
						        {type:'Input',label:this.$t('field.UserAccount_user_name'),prop:'user_name',width:'150px'},   
						        {type:'Input',label:this.$t('field.UserAccount_user_phone'),prop:'user_phone',width:'150px'},   
						]
					}
				})
			},
			updateExt(row,field){
				if(row.uid){
					updateExt({uid:row.uid,[field]:row[field]}).then(res => {
						this.$message({message: this.$t('system.success'), type: 'success'})
					})
				}
			},
			detail(row){
				this.dialog.detailDialogStatus = true
				this.detailInfo = {uid:row.uid ? row.uid : this.ids.join(',')}
			},
		  sortChange(column) {
			  //排序的字段是属性名
			  this.sort = column.prop;
			  //排序的方式是根据上下选择来确定
			  if(column.order == 'ascending'){
			    this.order='asc'
			    }
			  if(column.order=='descending'){
			    this.order='desc'
			  }  
			  //此方法为获取数据的方法
			  this.index();
		},
  
		  getSummaries(param) {
			const { columns, data } = param;
			const sums = [];
			columns.forEach((column, index) => {
				 if (index === 1) {
				   sums[index] = this.$t('system.summary');
				   return;
				 }
		         if(column.property === 'account' || column.property === 'rec_total' || column.property === 'wit_total' || column.property === 'capital_total' || column.property === 'trade_total' || column.property === 'manage_total' || column.property === 'deferred_total' || column.property === 'divide_total' || column.property === 'fee_total' ) {
				     const values = data.map(item => Number(item[column.property]));
				     if (!values.every(value => isNaN(value))) {
							sums[index] = values.reduce((prev, curr) => {
							 const value = Number(curr);
							 if (!isNaN(value)) {
							   return prev + curr;
							 } else {
							   return prev;
							 }
							}, 0);
							sums[index] = sums[index].toFixed(2)
					 } else {
                            sums[index] = '/' // 其余列一律不进行合计
                     }
 
				   }
			 });
			 return sums
	   },
  
			selection(selection) {
			    this.selectRows=selection
			    this.selectTotal=selection.length
				this.ids = selection.map(item => item.uid)
				this.single = selection.length != 1
				this.multiple = !selection.length
			},
			handleRowClick(row, rowIndex,event){
				if(event.target.className !== 'el-input__inner'){
					this.$refs.multipleTable.toggleRowSelection(row)
				}
			},
			rowClass ({ row, rowIndex }) {
				for(let i=0;i<this.ids.length;i++) {
					if (row.uid === this.ids[i]) {
						return 'rowLight'
					}
				}
			},
		},	
		mounted(){
			this.index()
		}
	}
</script>
<style  lang="scss">
@import '@/assets/scss/common.scss'
</style>